<template>
    <el-date-picker
      v-model="dateVal"
      :type="type"
      :value-format="valueFormat"
      :disabled-date="pickerOptions"
      :start-placeholder="startPlaceholder"
      :end-placeholder="endPlaceholder"
      :placeholder="placeholder"
      :range-separator="rangeSeparator"
      @change="handleChange"
      @calendar-change="calendarChange"
    ></el-date-picker>    
  </template>
  <script>
  import { ref, computed, watchEffect } from 'vue'
  export default {
    name: "datePicker",
    props: {
      type: String,
      valueFormat: String,
      placeholder: {
        type: String,
        default: '请选择日期'
      },
      startPlaceholder: {
        type: String,
        default: '请选择开始日期'
      },
      endPlaceholder: {
        type: String,
        default: '请选择结束日期'
      },
      rangeSeparator: {
        type: String,
        default: '至'
      },
      config: {
        type: Object,
        default: () => {}
      }
    },
    setup(props, { emit }) {
      const dateVal = ref('')
      const { config } = props 
      const placeholder = config?.placeholder || props.placeholder
      const rangeSeparator = config?.rangeSeparator || props.rangeSeparator
      const type = config?.type || props.type
      const startPlaceholder = config?.startPlaceholder || props.startPlaceholder
      const endPlaceholder = config?.endPlaceholder || props.endPlaceholder
      let pickDate = ''
      const valueFormat = computed(() => {
        if (props.valueFormat) return props.valueFormat
        if (config?.valueFormat) return config?.valueFormat
          const enumFormat = {
          'date': 'YYYY-MM-DD',
          'daterange': 'YYYY-MM-DD',
          'datetime': 'YYYY-MM-DD HH:mm:ss',
          'datetimerange': 'YYYY-MM-DD HH:mm:ss',
          'month': 'YYYY-MM',
          'year': 'YYYY',
          'monthrange': 'YYYY-MM',
          'yearrange': 'YYYY'
        }
        return enumFormat[type]
      })
      watchEffect(() => {
        if (dateVal) {
          // emit('change', dateVal.value)
          emit('change:value', dateVal.value)
        }
      })
      
      const pickerOptions = time => {
        const cf = config || {}
        if (cf.disabledAfterDate) return time.getTime() > cf.disabledAfterDate
        if (cf.disabledBeforeDate) return time.getTime() < cf.disabledBeforeDate
                  /*
                  * 根据firstTime, endTime 两个时间的大小，可选两者之间的范围
                  */
        if (cf?.disabledDate?.length) return cf.disabledDate[0] > cf.disabledDate[1] ?
                                        time.getTime() > cf.disabledDate[0] || time.getTime() < cf.disabledDate[1] :
                                        time.getTime() > cf.disabledDate[1] || time.getTime() < cf.disabledDate[0]
                  /*
                  * （type === 'daterange'）根据第一次点击的值
                  * 1，动态设定可选择范围 正数 => 可选后n天  负数 => 可选前n天
                  * 2, 值的前n（数组第一个值）天，和后n（后一个值）天，后一个值必须大于前一个值
                  */
        if (cf?.pickerRangeDate) {
          if (!pickDate) return
            const arr = cf.pickerRangeDate
            let choicedTime = new Date(pickDate).getTime()
            if (arr < 0) {
              const minTime = new Date(choicedTime) - 0 + 24 * 60 * 60 * 1000 * arr
              return time.getTime() < minTime || time.getTime() > choicedTime
            } else if (Array.isArray(arr)) {
              if (arr[1] < arr[0]) throw '当pickerRangeDate为数组时，只处理arr[1] > arr[0]的情况'
              const minTime = new Date(choicedTime) - 0 + 24 * 60 * 60 * 1000 * arr[0]
              const maxTime = new Date(choicedTime) - 0 + 24 * 60 * 60 * 1000 * arr[1]
              return time.getTime() < minTime || time.getTime() > maxTime
            } else {
              const maxTime = new Date(choicedTime) - 0 + 24 * 60 * 60 * 1000 * arr
              // console.log(choicedTime, maxTime)
              return time.getTime() < choicedTime || time.getTime() > maxTime
            }
          }
        }
      const handleChange = (val) => {
        console.log('handleChange---', val)
      }
      const calendarChange = (arr) => {
        if (type !== 'daterange') return
        pickDate = arr[0].getTime()
        if (arr[1]) {
          pickDate = ''
        }
      }
      return {
        handleChange,
        calendarChange,
        pickerOptions,
        valueFormat,
        endPlaceholder,
        startPlaceholder,
        placeholder,
        rangeSeparator,
        dateVal
      }
    }
  }
  </script>